import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    extensions: ['.js', '.vue', '.json', 'scss', '.ts'],
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, 'src'),
      },
      {
        find: 'components',
        replacement: resolve(__dirname, 'src/components'),
      },
      {
        find: 'utils',
        replacement: resolve(__dirname, 'src/utils'),
      },
      {
        find: 'views',
        replacement: resolve(__dirname, 'src/views'),
      },
    ],
  },
  server: {
    open: true,
    port: 6688,
    proxy: {
      '/ws': {
        target: 'https://apis.map.qq.com',
      },
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 引入全局自定义主题文件
        additionalData: `@import "@/styles/theme/handle.scss";`,
        // 引入全局自定义主题文件, 覆盖elementPlus默认主题
        // additionalData: `@use "@/styles/element.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: [
        'vue',
        'vue-router',
        'pinia',
        {
          '@vueuse/core': [
            'useFullscreen',
            'useMouse', // import { useMouse } from '@vueuse/core',
            ['useFetch', 'useHsFetch'], // import { useFetch as useHsFetch } from '@vueuse/core',
          ],
          axios: [
            // default imports
            ['default', 'axios'], // import { default as axios } from 'axios',
          ],
        },
      ],
      vueTemplate: true, // 是否在 vue 模板中自动导入
      dts: resolve(resolve(__dirname, './src'), 'types', 'auto-imports.d.ts'),
      // 开启下面代码, 运行会生成一个 .eslintrc-auto-import.json - 解决eslint的报错, 生成后关闭即可
      eslintrc: {
        enabled: false,
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true,
      },
    }),
    // 配置elementPlus采用scss样式配色系统
    Components({
      resolvers: [
        ElementPlusResolver({
          /* importStyle: 'sass' */
        }),
      ],
    }),
  ],
  define: {
    __VUE_I18N_FULL_INSTALL__: true,
    __VUE_I18N_LEGACY_API__: true,
    __INTLIFY_PROD_DEVTOOLS__: false,
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true',
  },
})
